<template>
    <div class="common-layout">
        <el-container>
            <el-header style="border-style: groove;border-width: 2px; margin-top: 20px;">
                单号ID:
                <el-input placeholder="单号" style="width: 200px;margin-right: 20px;" />
                物资:
                <el-input placeholder="物资明细" style="width: 200px;margin-right: 20px;" />
                状态
                <el-input placeholder="状态" style="width: 200px;margin-right: 20px;" />
                <el-button type="primary" icon="el-icon-search">搜索</el-button>
            </el-header>
            <el-main style="border-style: groove;border-width: 2px;height: 600px;">
                <el-button type="primary" @click="dialogFormVisible = true">
                    添加
                </el-button>
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="date" label="单号ID" width="150" />
                    <el-table-column prop="name" label="库房名称" width="150" />
                    <el-table-column prop="address" label="供应商名称" width="150" />
                    <el-table-column prop="date" label="采购人姓名" width="150" />
                    <el-table-column prop="name" label="表单类型名称" width="150" />
                    <el-table-column prop="address" label="物资明细内容" width="150" />
                    <el-table-column prop="address" label="订单状态" width="150" />
                </el-table>
                <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
                    <el-form :model="form">
                        <el-form-item label="Promotion name" :label-width="formLabelWidth">
                            <el-input v-model="form.name" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="Zones" :label-width="formLabelWidth">
                            <el-select v-model="form.region" placeholder="Please select a zone">
                                <el-option label="Zone No.1" value="shanghai" />
                                <el-option label="Zone No.2" value="beijing" />
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <div class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取消</el-button>
                            <el-button type="primary" @click="dialogFormVisible = false">
                                添加
                            </el-button>
                        </div>
                    </template>
                </el-dialog>
            </el-main>
        </el-container>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]
</script>